<template>
  <div>
    <!-- 学习状态展示 -->
    <div style="display: flex; justify-content: space-between;flex-wrap: nowrap;flex-direction: row; width: 100%;">
      <!-- 问题跳转 -->
      <home-problem-skip-card/>
      <!-- 学习记录 -->
      <home-learning-records-card/>
      <!-- 签到 -->
      <home-sign-in-card/>
    </div>
    <!-- 学习内容与讨论 -->
    <div class="learner-content">
      <!-- 主要内容 -->
      <div class="content">
        <home-learning-path-card/>
        <home-note-discuss-card/>
      </div>
      <!-- 侧边栏 -->
      <div style="width: 250px;">
        <home-learning-plan-card/>
      </div>
    </div>
  </div>
</template>

<script>
import HomeSignInCard from '@/components/home/home-sign-in-card'
import HomeProblemSkipCard from '@/components/home/home-problem-skip-card'
import HomeLearningRecordsCard from '@/components/home/home-learning-records-card'
import HomeLearningPlanCard from '@/components/home/home-learning-plan-card'
import HomeLearningPathCard from '@/components/home/home-learning-path-card'
import HomeNoteDiscussCard from '@/components/home/home-note-discuss-card'
export default {
  name: 'HomeView',
  components: { HomeNoteDiscussCard, HomeLearningPathCard, HomeLearningPlanCard, HomeLearningRecordsCard, HomeProblemSkipCard, HomeSignInCard }
}
</script>

<style scoped>
.learner-content{
  display: flex;
  justify-content: space-between;
  flex-wrap: nowrap;
  flex-direction: row;
  width: 100%;
}
.el-card{
  border-radius: 10px;
  box-shadow: #2c3e50 0px -13px 20px -20px;
}
.learner-content .el-card{
  margin-top: 30px;
}

.learner-content > .content{
  display: flex;
  flex-wrap: nowrap;
  flex-direction: column;
  width: 1000px;
  /*height: 300px;*/
  /*background-color: #42b983;*/
}

</style>
